/* ------------------------------------------------------------
	Reset Styles (from meyerweb.com)
------------------------------------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

h1, h2, p , ul { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; margin: 10px 25px; }
li { margin: 0 25px; }
h1 { font-size: 150%; font-weight: bold; }
h2 { font-size: 125%; font-weight: bold; }
code { font-family: "Courier New", monospace; }
#about  { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #FCF1B8; font-size: 14px; border: 3px solid #FCC119; margin: 0 0 25px 0;}
#showAbout { position: absolute; left: 275px; top: 5px; padding: 3px 5px; height: 20px; margin: 0; background: white;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#showAbout a, #showAbout a:visited, #showAbout a:hover { text-decoration: none; color: #333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-weight: bold; letter-spacing: -.5px; font-size: 15px; }
#hideAbout { text-align: center; }
#hideAbout a, #hideAbout a:visited, #hideAbout a:hover { color: black; text-decoration: none; }

body { margin: 0; padding: 0 0 10px 0; text-align: center; }
div { margin: 0; padding: 0; }
#header { position: relative; width: 975px; text-align: left; margin: 0 auto; }
#logo { margin: 0; width: 152px; height: 42px; background: url('imgs/logo.png'); }
#logo a { display: block; width: 100%; height: 100%; text-indent: -9999em; }

#credits { margin: 0 0 25px 0;}
#hifiMention { display: inline; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#nmcLogo { display: inline; }
#nmcLogo img { vertical-align: top; margin: 10px 20px; display: inline; }
#social { position: absolute; left: 650px; top: 4px; padding: 5px 0 0 0; height: 20px; margin: 0; background: white;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

#container {margin-top: 10px;}
#container #tool { width: 700px; margin:0 auto;}
#container #sidebar { width: 325px; float: right; }

#cheatSheet { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #FCF1B8; font-size: 14px; border: 3px solid #FCC119; text-align: center; }
#cheatSheet code { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; }
#cheatSheet dl { text-align: left; display: none; margin: 10px 5px 10px 15px; }
#selectedContent dl { display: block; }
#cheatSheet dl dt { text-decoration: underline; display: block; color: #333; font-size: 110%; }
#cheatSheet dl dd { text-align: left; margin: 0 0 5px 10px;}
#cheatSheet dl dd ul { margin: 0 0 0 0; padding: 0;}
#cheatSheet dl dd ul li { list-style: none; margin: 0 0 0 0; padding: 0;}
#cheatSheet h2 { font-weight: normal; font-size: 20px; margin: 0; background: #FCC119; color: #FFF; padding: 5px 0; }
#cheatSheet h3 { cursor: pointer; cursor: hand; font-weight: normal; font-size: 16px; line-height: 40px; background: #FCC119; color: #FFF; display: inline; padding: 5px 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#cheatSheet h3.selected { background: #fff; color: #FCC119; font-weight: bold; border: 2px solid #FCC119;	text-shadow: 0px 1px 1px #ccc; }
#cheatSheet h3:hover { 	text-shadow: 0px 1px 1px #ccc;  }
#cheatSheet code { font-size: 15px; margin: 0 10px 0 0; }
#regexPane { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#regexPane.valid { background: #FFFF8F; border: 3px solid #FFFF33; }
#regexPane.valid #regex{ border: 2px solid #FFFF33; }
#regexPane.match { background: #D2FFC4; border: 3px solid #2DC800; }
#regexPane.match #regex { border: 2px solid #2DC800; }
#regexPane.invalid { background: #FFE6CC; border: 3px solid #FF0000; }
#regexPane.invalid #regex { border: 2px solid #FF0000; }
	#regexPaneText { display: none; font-size: 23px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; text-align: center; padding: 10px; }
		#editRegex { cursor: pointer; cursor: hand; }
		#editRegex:hover { text-decoration: underline; }
		
#regexPaneInputs { text-align: center; font-size: 20px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; }
#regex { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;font-size: 20px; padding: 5px 0 5px 0; margin: 10px 0 0 ; width: 550px; text-align: center; }
#regexPaneCommands, #regexPaneCommands ul, #regexPaneCommands li{ display: inline; margin: 0; padding: 0; font-size: 12px; }
#regexPaneCommands li { margin: 0 10px 0 0; padding: 2px 5px; cursor: pointer; cursor: hand; }
#regexPane.valid #regexPaneCommands li { background: #FFFF33; color: black;}
#regexPane.match #regexPaneCommands li{ background: #2DC800; color: white;}
#regexPane.invalid #regexPaneCommands li{ display: none;}

#regexFlags { font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; }
#regexFlags ul { margin: 0; display: inline; text-align: center; }
#regexFlags li { margin: 0; list-style: none; display: inline; }

dl { margin: 0; }
dt { display: none; }
dd { margin: 0 0 5px 0; text-align: center; }
#regexFlagsDt { display: inline; }

#haystackPane { font-size: 20px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; margin: 25px 0; }
#haystackPaneText { cursor: pointer; cursor: hand; width: 100%; white-space: pre-wrap; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;}
#haystackPaneInputs { display: none; }
#haystackPaneInputs textarea { width: 625px; height: 450px; border: 3px solid gray; margin: 0; font-size: 20px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; }

#haystackPane .match { font-weight: bold; font-size: 130%; background: yellow; }
.group-1 { background: #6FFF44; }
.group-2 { background: #99C7FF; }
.group-3 { background: #FFCC33; }
.group-4 { background: #CC99FF; }
.group-5 { background: #D698FE; }
.group-6 { background: #B4D1B6; }
.group-7 { background: #AAAAFF; }
.group-8 { background: #FFA8D3; }
.group-9 { background: #F2F4B3; }
.group-10 { background: #C4ABFE; }

#matchesPane table { border-collapse: collapse; border-top: 3px solid gray; border-bottom: 3px solid gray; width: 100%; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 20px; }
#matchesPane thead tr td { font-weight: bold;  border-bottom: 1px solid gray; }
#matchesPane tr, #matchesPane td, #matchesPaneTable { margin: 0; padding: 5px; }
#matchNumber { width: 25px; }

#code {border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; white-space: pre-wrap; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; background: black; border: 3px solid gray; color: white; padding: 25px; margin: 25px 0 0 0; }
#codePaneCommands, #codePaneCommands ul, #codePaneCommands li{ display: inline; margin: 0; padding: 0; font-size: 12px; }
#codePaneCommands li { margin: 0 0 0 250px; padding: 2px 5px; cursor: pointer; cursor: hand; color: white; background: gray; }
#matchInputOnce { display: none; }
#matchInputGlobal { dispaly: none; }

#footer { clear: both; float:none; width: 975px; margin: 0 0; padding: 25px 0; color: #aaa; font-size: 12px; }
#footer a, #footer a:visited, #footer a:hover { color: #000; }